<template>
  <div class="study">
    <div class="head flex item-center">
        <i class="el-icon-back black bold" @click="goback" style="margin-right: 10px;"></i>
        <h1 class="black bold">{{ course.name }}</h1>
    </div>
    <div class="content flex">
        <div class="aside" :style="{marginLeft: asideShow ? '0' : '-320px'}">
            <Chapter :course="course" 
                :chapterList="chapterList" cls="black"
                :chapter="currentChapter"
                @changeChapter="changeChapter"
            />
            <!-- <ul>
                <li class="flex between item-center" 
                    v-for="item of chapterList" :key="item.id"
                    :class="item.id === currentChapter.id && 'current'"
                    @click="changeChapter(item)"
                >
                  <div>
                    <span v-if="item.course_type == 3" class="iconfont">&#xe695;</span>
                    <span v-else-if="item.course_type == 2" class="iconfont">&#xe687;</span>
                    <span v-else-if="item.course_type == 1" class="iconfont">&#xe616;</span>
                    <span style="margin-left: 10px;">{{ item.name }}</span>
                  </div>
                </li>
            </ul> -->
        </div>
        <div class="view">
            <div class="bar" @click="asideShow = !asideShow">
                <i class="white" :class="asideShow ? 'el-icon-arrow-left' : 'el-icon-arrow-right'"></i>
            </div>
            <!-- 图文 -->
            <div class="view-content flex between">
                <div class="playerbox">
                    <div v-show="currentChapter.course_type == '3'"  v-html="currentChapter.content"></div>
                    <Audio ref="audio" :chapter="currentChapter" v-show="currentChapter.course_type == '2'"></Audio>
                    <Video ref="video" v-show="currentChapter.course_type == '1'"></Video>
                </div>
                
                <div class="options">
                    <ul>
                        <li @click="noteVisible = true">
                            <i class="iconfont">&#xe661;</i>
                            <div class="white">笔记</div>
                        </li>
                        <li @click="commentVisible = true">
                            <i class="iconfont">&#xe642;</i>
                            <div class="white">评价</div>
                        </li>
                        <li @click="handleDownload()">
                            <i class="iconfont">&#xe653;</i>
                            <div class="white">下载</div>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- 音频 -->
            <!-- <div class="view-content" >
                
            </div> -->
            <!-- 视频 -->
            <!-- <div class="view-content" >
                
            </div> -->
        </div>
    </div>
    <div class="courseinfo flex between">
        <el-tabs v-model="activeTab" @tab-click="tabClick" style="flex: 5;">
            <el-tab-pane label="课程简介" name="1">
                <div class="b-content" v-html="course.content"></div>
          </el-tab-pane>
          <!-- <el-tab-pane label="课程评论" name="2">
            <CourseComment :commentTotal="commentTotal" :commentList="commentList" />
            <el-pagination background layout="prev, pager, next" :total="commentTotal"></el-pagination>
          </el-tab-pane> -->
          <el-tab-pane label="课程笔记" name="3">
            <CourseNote :noteTotal="noteTotal" :noteList="noteList" />
            <el-pagination background layout="prev, pager, next" :total="commentTotal"></el-pagination>
          </el-tab-pane>
          <el-tab-pane label="课后练习" name="4">
            <CourseTest ref="courseTest" :chapter="currentChapter" />
          </el-tab-pane>
        </el-tabs>
        <div class="recommend">
            <h3 style="text-align: center;margin-bottom: 15px;" class="large">推荐课程</h3>
            <ul>
                <li class="flex item-center"
                     v-for="item in courseList" :key="item.id">
                    <div class="imgbox" :style="{backgroundImage: `url(${item.show_tpdz})`}"></div>
                    <div class="descbox">
                        <h2 class="black large">{{ item.name }}</h2>
                        <p>{{ item.introduction }}</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <el-drawer
        title="课程笔记"
        :visible.sync="noteVisible"
        direction="rtl"
        :before-close="handleClose">
        <div class="notebox">
            <el-input style="margin-bottom: 20px;"
                type="textarea"
                :autosize="{ minRows: 8, maxRows: 10}"
                placeholder="请输入内容"
                v-model="note.content">
            </el-input>
            <div class="flex between item-center">
                <div class="flex item-center">
                    <span>是否公开：</span>
                    <el-switch
                        v-model="note.is_open"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </div>
                <div>
                    <el-button type="primary" round  @click="handleNote()">提交</el-button>
                </div>
            </div>
            <CourseNote :noteTotal="noteTotal" :noteList="noteList" />
        </div>
    </el-drawer>
    <el-dialog
        title="课程评论"
        :visible.sync="commentVisible"
        width="30%">
        <el-input style="margin-bottom: 20px;"
            type="textarea"
            :autosize="{ minRows: 8, maxRows: 10}"
            placeholder="请输入内容"
            v-model="comment.content">
        </el-input>
        <span slot="footer" class="dialog-footer">
            <el-button @click="commentVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleComment()">确 定</el-button>
        </span>
        </el-dialog>
  </div>
</template>

<script>
import Api from '@/api'
import {download} from '@/utils'

import Audio from '@/components/Audio'
import Video from '@/components/Video'

import Chapter from '@/components/Chapter'
import CourseComment from '@/components/CourseComment'
import CourseNote from '@/components/CourseNote'
import CourseTest from '@/components/CourseTest'

export default {
    components: {
        Audio,
        Video,
        Chapter,
        CourseComment,
        CourseNote,
        CourseTest
    },
    data() {
        return {
            note: {
                is_open: true
            },
            comment: {
                like_num: '0'
            },
            commentVisible: false,
            noteVisible: false,
            course: {},
            chapterList: [],
            currentChapter: {}, // 当前chapter
            activeTab: '1',
            asideShow: true,
            pageNum: 1,
            pageSize: 10,
            commentTotal: 0,
            commentList: [],
            noteTotal: 0,
            noteList: [],
            
            courseList: []
        }
    },
    mounted() {
        this.getCourseInfo()
        this.getChapterList()
        this.getCourseList()
    },
    methods: {
        getCourseList() {
            Api.courseListPage({
                pageSize: 5,
                pageNum: 1,
                recommend: 1
            }).then(res => {
                this.courseList = res.data.rows || []
            })
        },
        handleDownload() {
            if (!this.currentChapter.doc_address) {
                return this.$message.warning('没有可下载的资料')
            }
            const params = {
                file_path: this.currentChapter.doc_address,
                name: this.currentChapter.doc_name,
                save_type: this.currentChapter.doc_save_type
            }
            Api.downloadLocalFile(params).then(res => {
                download(res, params.name)
            })
        },
        handleComment() {
            if (!this.comment.content || !this.comment.content.trim()) {
                return this.$message.warning('内容不能为空')
            }
            this.comment.course_id = this.course.id
            this.comment.chapter_id = this.currentChapter.id
            Api.comment(this.comment).then(res => {
                if (res.success) {
                    this.$message.success(res.msg)
                    this.comment.content = ''
                    this.getComment()
                    this.commentVisible = false
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        handleClose(done) {
            done()
        },
        handleNote() {
            if (!this.note.content || !this.note.content.trim()) {
                return this.$message.warning('内容不能为空')
            }
            this.note.course_id = this.course.id
            this.note.chapter_id = this.currentChapter.id
            Api.note(this.note).then(res => {
                if (res.success) {
                    this.$message.success(res.msg)
                    this.note.content = ''
                    this.getNotes()
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        // 课程评论
        getComment() {
            Api.getComment({
                course_id: this.course.id,
                chapter_id: this.currentChapter.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                console.log('评论信息', res)
                this.commentTotal = res.data.total
                this.commentList = res.data.rows || []
            })
        },
        // 获取笔记
        getNotes() {
            Api.getNotes({
                course_id: this.course.id,
                chapter_id: this.currentChapter.id,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }).then(res => {
                console.log('笔记信息', res)
                this.noteTotal = res.data.total
                this.noteList = res.data.rows || []
            })
        },
        
        // 获取课程信息
        async getCourseInfo() {
            const id = this.$route.params.id
            const { data } = await Api.getCourseInfo({id})
            this.course = data || {id}
        },
        // 获取课程大纲
        async getChapterList() {
            const id = this.$route.params.id
            const chapterId = this.$route.query.cid
            const { data } = await Api.getChapterList({course_id: id})
            this.chapterList = data || []
            this.chapterList.forEach(item => {
                if(item.childList && item.childList.length) {
                    item.childList.forEach(child => {
                        if (child.id === chapterId) {
                            this.currentChapter = child
                            return;
                        }
                    })
                } else {
                    if (item.id === chapterId) {
                        this.currentChapter = item
                        return;
                    }
                }
                
            })
        },
        doPlay(chapter) {
            this.$refs.audio.destroy()
            this.$refs.video.destroy()
            if (chapter.course_type == '2') {
                this.$refs.audio.play({
                    src: chapter.video_address || require('@/assets/mp3/1.mp3'),
                    name: '测试音频',
                    vid: '000001',
                    poster: require('@/assets/img/index/b1.jpg')
                }, {disableProgress: '1' != chapter.is_complete})
            } else if (chapter.course_type == '1' && !chapter.video_address) {
                this.$refs.video.play(chapter.video_address || require('@/assets/mp4/1.mp4'), {
                    disableProgress: '1' != chapter.is_complete
                })
            }
        },
        changeChapter(chapter) {
            this.currentChapter = chapter
            this.$router.push(`/study/${this.course.id}?cid=${chapter.id}`)
        },
        goback() {
            this.$router.go(-1)
        },
        tabClick(tab, e) {
            
        }
    },
    computed: {
        chapterId() {
            return this.currentChapter.id
        }
    },
    watch: {
        chapterId(newValue, oldValue) {
            this.doPlay(this.currentChapter)
            this.getComment()
            this.getNotes()
        }
    }
}
</script>

<style lang="scss" scoped>
.study {
    .head {
        height: 50px;
        padding: 0 20px;
        i, h1 {
            font-size: 22px;

        }
    }
    .content {
        height: calc(100vh - 50px);
        background-color: #1c1f21;
        padding: 20px 0 0 20px;
        overflow: hidden;
        .aside {
            width: 300px;
            transition: all .2s;
        }
        .view {
            flex: 1;
            position: relative;
            padding: 0 0 0 30px;
            .bar {
                position: absolute;
                height: 100px;
                width: 30px;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                background-color: #000;
                text-align: center;
                cursor: pointer;
                border-top-left-radius: 10px;
                border-bottom-left-radius: 10px;
                >i {
                    font-size: 22px;
                    line-height: 100px;
                }
            }
            .view-content {
                height: 100%;
                width: calc(100% + 30px);
                padding-right: 30px;
                overflow-y: scroll;
                position: relative;
                .playerbox {
                    flex: 1;
                    padding: 0 25px;
                }
                .options {
                    position: absolute;
                    top: 0;
                    right: 5px;
                    width: 50px;
                    li {
                       padding: 0 10px 20px;
                       text-align: center;
                        color: #fff;
                        cursor: pointer;
                        &:hover {
                            background: #000;
                        }
                    }
                }
            }
        }
    }
    .courseinfo {
        min-height: 500px;
        margin: 20px;
        padding: 20px;
        border: 1px solid #eee;
        .recommend {
            flex: 2;
            margin-left: 20px;
            li {
                padding: 15px;
                border-top: 1px solid #eee;
            }
            .imgbox {
                width: 200px;
                height: 100px;
                margin-right: 15px;
                background-position: center center;
                background-repeat: no-repeat;
                background-size: cover;
            }
            .descbox {
                height: 100px;
                display: flex;
                flex-direction: column;
                justify-content: space-around;
            }
        }
    }
}
.current >div>span {
    color: var(--color-primary);
}
.notebox {
    padding: 10px;
    // padding: 10px 40px 10px 10px;
    // width: calc(100% + 30px);
}
</style>